<template>
  <div>
    <div class="margin border_blue">
      <div slot="header" class="clearfix text-left color_blue padding-sm">
        <div>
          <template v-if="pickgoodsFeeRecord">
            历史价格查看->文件名：{{
            pickgoodsFeeRecord.fileName
            }}
            &emsp;操作人：{{
              userMap[pickgoodsFeeRecord.cuser]
            }}
            &emsp;上传时间：{{ pickgoodsFeeRecord.cdate }}
            &emsp;生效时间：{{ pickgoodsFeeRecord.startTime }}
          </template>
        </div>
      </div>
      <el-card shadow="never" class="table-container border_blue">
        <table
          border="1"
          cellpadding="2"
          cellspacing="1"
          style="table-layout:fixed;"
          class="table-data"
        >
          <thead>
          <th>省</th>
          <th>市</th>
          <th>县/区</th>
          <template v-for="(item, index) in pickgoodsFeeRecordSubjects">
            <th>{{ item.showName }}</th>
          </template>
          </thead>
          <tbody>
          <template v-for="(item, index) in pickgoodsFeeZones">
            <tr class="el-table__row">
              <!-- 第1列每个学生只需要展示1次 -->
              <td>
                <span> {{ item.province }}</span>
              </td>
              <td>
                <span> {{ item.city }}</span>
              </td>
              <td>
                <span> {{ item.area }}</span>
              </td>
              <template
                v-for="(item2, index2) in pickgoodsFeeRecordSubjects"
              >
                <td>
                  <template
                    v-if="
                                  channelCalculateFormulaMap &&
                                    channelCalculateFormulaMap[
                                      `${item.id}_${item2.id}`
                                    ]
                                "
                  >
                                <span>
                                  {{
                                    channelCalculateFormulaMap[
                                      `${item.id}_${item2.id}`
                                    ].formula
                                  }}
                                </span>
                  </template>
                </td>
              </template>
            </tr>
          </template>
          </tbody>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
export default {
  data() {
    return {
      pickgoodsFeeRecord: {},
      userMap: {},
      pickgoodsFeeRecordSubjects: [],
      pickgoodsFeeZones: [],
      channelCalculateFormulaMap: {},
    };
  },
  mounted() {
    this.autoInitData();
  },
  methods: {
    autoInitData() {
      ajax("showPickgoodsFeePrice", {
        pickgoodsfeeRecordId: this.$route.query.id
      })
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            console.log(data);
            this.pickgoodsFeeRecordSubjects = data.pickgoodsFeeRecordSubjects;
            this.pickgoodsFeeZones = data.pickgoodsFeeZones;
            this.channelCalculateFormulaMap = data.channelCalculateFormulaMap;
            this.userMap = data.userMap;
            this.pickgoodsFeeRecord = data.pickgoodsFeeRecord;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style scoped>
.color_blue {
  background-color: #d9edf7;
  color: #31708f;
  background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
}
.border_blue {
  border: 1px solid #bce8f1;
  border-radius: 5px;
}
table {
  min-width: 100%;
}
td {
  min-width: 100px;
  padding: 6px;
  margin: 6px;
}
tbody {
}
th {
  min-width: 100px;
  font-size: larger;
  padding: 6px;
  margin: 6px;
}
.table-container {
  overflow: auto;
  display: block;
}
</style>
